<template>
  <div class="element-carousel">
    <h2>轮播图 | 走马灯</h2>
    <div class="block">
      <span class="demonstration">默认 Hover 指示器触发</span>
      <el-carousel height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
      <h2>卡片化</h2>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3 class="medium">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ElementCarousel'
}
</script>
<style lang="scss">
.element-carousel {
  margin: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  text-align: left;
  h2 {
    margin: 10px 0;
  }
  .el-carousel__item {
    h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }
    &:nth-child(2n) {
      background-color: #99a9bf;
    }
    &:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}
</style>
